<template>
    <!-- 编辑分类   -->
    <el-dialog
        :before-close = "editHandleClose"
        :visible.sync = "editDialogVisible"
        title = "编辑分类"
        width = "50%">
        <el-form ref = "editCateRef" :model = "editData" :rules = "editRules">
            <el-form-item label = "商品名称" prop = "cat_name">
                <el-input v-model = "editData.cat_name" placeholder = "商品名称"
                          @keyup.enter.native = "SaveEdit(editData.cat_id)"></el-input>
            </el-form-item>
        </el-form>
        <span slot = "footer" class = "dialog-footer">
    <el-button @click = "editDialogVisible = false">取 消</el-button>
    <el-button type = "primary" @click = "SaveEdit(editData.cat_id)">确 定</el-button>
  </span>
    </el-dialog>

</template>
<script>
export default {
    name: "EditCate",
    props: ['editForm'],
    watch: {
        editForm (value) {
            this.editData = value;
        }
    },
    data () {
        return {
            editData: {
                cat_name: '',
            },
            editRules: {},
            editDialogVisible: false,
        };
    },
    methods: {
        async SaveEdit (cat_id) {
            const {data: res} = await this.$http.put(`categories/${cat_id}`, {...this.editData});
            if (res.meta.status !== 200) {
                return this.$message.error('更新分类失败');
            }
            this.$message.success('更新分类成功');
            this.editDialogVisible = false;
            this.$emit('getCateList');
        },
        editHandleClose () {
            this.editDialogVisible = false;
            this.$refs.addCateFormRef.resetFields();
        }
    }
}
</script>
